<template>
  <el-container>
    <el-header>
      <h2>现场纠偏记录</h2>
    </el-header>
    <el-main>
      <el-form>
        <el-form-item label="人员">
          <el-cascader
            v-model="input.client"
            :options="clientList"
            placeholder="请在列表中选择"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="席位">
          <el-cascader
            v-model="input.seat"
            :options="seats"
            placeholder="请在列表中选择"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="input.date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="时间">
          <el-time-picker
            v-model="input.time"
            placeholder="选择时间"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <pre>
      {{user}}
      </pre>
      <pre>
      {{input}}
      </pre>
      <pre>
      {{output}}
      </pre>
    </el-main>
  </el-container>
</template>

<script>
  import { mapState, mapGetters } from "vuex";
  import dateFormat from "@/utils/dateFormat.js"
  export default {
    data() {
      return {
        input: {
          client: ["", ""],
          seat: ["", ""],
          time: "",
          date: "",
          detail: "",
          name: "",
          number: "",
          clientName: "",
          clientGroup: "",
          clientOffice: "",
          seatNumber: "",
          seatPosition: "",
        }
      }
    },
    computed: {
      ...mapState({
        clientList: (state) => state.clientData.clientCascaderLite,
        clientData: (state) => state.clientData.clientList,
        clientRankList: (state) => state.clientData.clientRankList,
        records: (state) => state.record.inspect.liveRecord,
        seats: (state) => state.statics.position,
        itemList: (state) => state.rectifyData.rectifyCascader,
        fullItems: (state) => state.rectifyData.rectifyItems,
        rectifyAttributes: (state) => state.statics.rectifyAttributes
      }),
      ...mapGetters({
        user: "userbase"
      }),
      output() {
        let time = this.input.time + ":00";
        let date = this.input.date;
        let detail = this.input.detail;
        let number = "";
        let name = "";
        let clientName = "";
        let clientGroup = "";
        let clientOffice = "";
        for (let i = 0; i < this.clientData.length; i++) {
          if (this.clientData[i].name == this.input.client[1] &&
            this.clientData[i].clientOffice == this.input.client[0]) {
            number = this.clientData[i].number;
            name = this.clientData[i].name;
            clientName = this.clientData[i].clientName;
            clientGroup = this.clientData[i].clientGroup;
            clientOffice = this.clientData[i].clientOffice;
          }
        }
        let seatNumber = "";
        let seatPosition = "";
        seatPosition = this.input.seat[0];
        seatNumber = this.input.seat[1];
        return {
          time,
          date,
          detail,
          name,
          number,
          clientName,
          clientGroup,
          clientOffice,
          seatNumber,
          seatPosition,
        }
      }
    },
    methods: {
      submit() {
        this.axios.post().then(response => { console.log(response) }).catch();
      },
      dateFormat,
      setDefaultDateTime() {
        this.input.time = this.dateFormat("HH:MM", new Date());
        this.input.date = this.dateFormat("YYYY-mm-dd", new Date());
      }
    },
    created() {
      this.setDefaultDateTime();
      // this.$router.push({ name: "Notice", params: { reason: "todo" } });
    },
  };
</script>